Перейти к основному содержимому

3.10. Блочная модель и каскадность

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Блочная модель​

Что такое блок?​

Блок — базовая единица компоновки в CSS, представляющая любой элемент как прямоугольную область, ограниченную четырьмя сторонами: верх, низ, лево, право.

Блочная модель состоит из:

  • контента — внутреннего содержимого (текст, изображение);
  • padding — внутренних отступов от контента до границы;
  • border — границы вокруг padding;
  • margin — внешних отступов от границы до соседей.

Ширина и высота элемента по умолчанию описывают только контентовую область. Свойство box-sizing: border-box позволяет включать padding и border в расчёт ширины/высоты — это удобнее при верстке адаптивных макетов.

Блоки бывают блочными (display: block), строчными (display: inline) и гибридными (display: inline-block, flex, grid).

Каждый элемент веб-страницы воспринимается браузером как прямоугольник, состоящий из четырёх областей:

  1. Контент — текст, изображения, другие вложенные элементы.
  2. Padding (внутренний отступ) — пространство между контентом и границей.
  3. Border (граница) — линия вокруг padding.
  4. Margin (внешний отступ) — пространство вне границы, отделяющее элемент от соседей.

По умолчанию свойства width и height задают размер только контентной области. Это означает, что итоговая ширина элемента равна:

ширина = width + левый padding + правый padding + левая граница + правая граница

Свойство box-sizing: border-box изменяет это поведение: width и height начинают включать padding и border. Это упрощает расчёт размеров и широко используется в современной вёрстке.

display​

Свойство display определяет, как элемент отображается в потоке документа. Основные значения:

  • block — элемент занимает всю ширину строки, начинается с новой строки.
  • inline — элемент занимает только необходимое пространство, не переносится на новую строку.
  • inline-block — сочетает черты inline и block: не переносится, но допускает установку ширины, высоты, отступов.
  • flex — создаёт flex-контейнер для гибкого позиционирования дочерних элементов.
  • grid — создаёт grid-контейнер для двумерной компоновки.
  • none — полностью убирает элемент из потока и делает его невидимым.

Принцип каскада​

Что означает каскадность?​

CSS называется каскадным, потому что стили применяются по определённому порядку:

  1. Приоритет источника (стиль браузера – авторские стили - !important);
  2. Специфичность селектора (например, #id важнее .class);
  3. Порядок объявления (поздние стили переопределяют ранние).

Каскадность — механизм, по которому браузер определяет итоговые стили элемента, учитывая несколько источников правил: стили браузера по умолчанию, стили разработчика, стили пользователя, и директиву !important.

Каскадность включает:

  • приоритет источника объявления (например, стили с !important получают максимальный вес);
  • специфичность селектора (больше деталей в селекторе — выше вес: #id > .class > tag);
  • порядок следования правил в коде (позднее объявление переопределяет более раннее при равной специфичности).

Такой подход позволяет переиспользовать и постепенно уточнять стили, не дублируя код.

Пример каскадности​

<!DOCTYPE html>
<html>
<head>
<style>
  /* Правило 1 */
  .box {
    color: red;
    font-size: 16px;
  }

  /* Правило 2 */
  .box {
    color: green;
  }

  /* Правило 3 */
  .box {
    color: blue;
  }
</style>
</head>
<body>

<div class="box">Текст внутри блока</div>

</body>
</html>

Все три правила имеют одинаковую специфичность селектора.

Браузер обрабатывает объявления свойств в порядке их следования в документе.

Приоритет получает свойство, расположенное ниже в исходном коде.

В результате рендеринга текст отображается синим цветом, так как это значение указано в последнем правиле. Остальные объявления свойства color перезаписываются последующими параметрами.

Как принимается решение?​

Решение принимается на основе трёх факторов:

  1. Источник объявления — порядок приоритета:

    • стили с !important в авторских таблицах;
    • обычные авторские стили;
    • стили пользователя (если заданы);
    • стили браузера по умолчанию.

  2. Специфичность селектора — чем точнее селектор, тем выше его вес. Расчёт ведётся по системе:

    • инлайн-стили (style="") — 1000;
    • идентификаторы (#id) — 100;
    • классы, атрибуты, псевдоклассы — 10;
    • теги и псевдоэлементы — 1.

  3. Порядок следования — при равной специфичности побеждает правило, объявленное позже.

Получается, что можно писать код в каком угодно порядке, добавлять элементы как в начале, так и в конце, поэтому на практике встречается такой код, когда каждое обновление добавлялось в конце файла.